﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>钩子函数之声明周期</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style>
        .del{text-decoration: line-through; color:#cccccc;}
    </style>
</head>
<body>
<h1>todo完成</h1><br/>

<div id="app">

</div>

<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    //生命周期
    //1、beforeCreate 2、created          在1的时候vue实例是没有data,methods,computed这些全局属性的，2执行完成才有这些属性了
    //beforeMount mounted
    //beforeUpdate updated          virtual dom   render(重渲染) and patch(比较)    完成则执行updated         这个步骤可以用watch钩子来替换
    //beforeDestroy destroyed
    var app = new Vue({//初始化时会调很多方法(钩子函数)
        el:'#app',
        data:{
        },
        methods:{
        },
        computed:{
        },
        created(){},//真实dom还没渲染完成
        mounted(){},//在这里的时候可以操作dom了
        template:''//如果有template模版，会替换app整个div。模版里必须在最外层有一个div    也就是只能有一个根元素，不能是纯文本
    });//有保证有编译的元素，例如这里的挂载点是app。
</script>

</body>
</html>